<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
	<link rel="stylesheet" type="text/css" href="../css/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../css/themes/icon.css">
	<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
	<script>
		$(function(){
			$('#tt2').datagrid({
				title:'My Title',
				iconCls:'icon-save',
				width:600,
				height:350,
				nowrap: false,
				striped: true,
				fit: true,
				url:'datagrid_data.json',
				sortName: 'code',
				sortOrder: 'desc',
				idField:'code',
				frozenColumns:[[
	                {field:'ck',checkbox:true},
	                {title:'code',field:'code',width:80,sortable:true}
				]],
				columns:[[
			        {title:'Base Information',colspan:3},
					{field:'opt',title:'Operation',width:100,align:'center', rowspan:2,
						formatter:function(value,rec){
							return '<span style="color:red">Edit Delete</span>';
						}
					}
				],[
					{field:'name',title:'Name',width:120},
					{field:'addr',title:'Address',width:120,rowspan:2,sortable:true},
					{field:'col4',title:'Col41',width:150,rowspan:2}
				]],
				pagination:true,
				rownumbers:true
			});
		});
		function addmenu(){
			var header = $('.layout-expand .layout-button-down').parent().parent();
			var menu = $('<div style="position:absolute;left:0;top:0;background:#fafafa;"></div>').appendTo(header);
			var btn = $('<a href="#">test</a>').appendTo(menu);
			btn.menubutton({
				menu:'#mymenu'
			});
		}
	</script>
</head>
<body class="easyui-layout">

		<!-- 
			===========================
			左侧的菜单部分
			===========================
		-->
		<div region="west" split="true" title="系统功能菜单" style="width:280px;padding1:1px;overflow:hidden;">
          <div class="easyui-accordion" fit="true" border="false" style="height:100%;">
            <div title="首页管理" style="overflow:auto;"> <span style="margin-left:20px;">我的首页</span><br>
            </div>
            <div title="博文管理" selected="true" style="padding:10px;"> <span style="margin-left:20px;">博文管理</span><br>
                <span style="margin-left:20px;">标签管理</span><br>
                <span style="margin-left:20px;">博文分类</span><br>
              <a href="#" onClick="addmenu()"  style="margin-left:20px;">addmenu</a> </div>
            <div title="照片管理"> <span style="margin-left:20px;">照片</span><br>
            </div>
            <div title="留言管理"> <span style="margin-left:20px;">留言</span><br>
            </div>
            <div title="关于我"> <span style="margin-left:20px;">关于我</span><br>
            </div>
          </div>
	  </div>
		<!--
		=======================================
			系统右侧的内容显示部分
		======================================= 
		-->
	<div region="center" title="Main Title" style="overflow:hidden;">
				<iframe allowtransparency="true" frameborder="0" scrolling="auto" ></iframe>
	 </div> 


		
	
</body>
</html>